import React from 'react'
import { List, Avatar, Space, Button, Tag, Modal, Tabs } from 'antd'
import styles from './CircleStyle.less';
import { DoubleRightOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'
import CameraImg from '../../../../../assets/timg.jpeg';
import CircleList from './warningContent'
import { IP } from '../../../../../utils/request'
import Warning from '../../../components/WaringSearch/index';
import * as actions from '../request/action'
import IconTable from '../IconList/IconTable'
import moment from 'moment'
const { TabPane } = Tabs

class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,//查看对应信息
            moreVisible: false,//查看更多
            information: {} //点击行的详情

        }
    }
    componentDidMount() {
    }
    // switch=()=>{
    //     this.setState({
    //         visible:true
    //     })
    // }
    close = () => {
        this.setState({ moreVisible: false })
        let information = {
            id: this.props.id,
            pageIndex: 0,
            pageSize: 10
        }
        this.props.getVidiconWarning(information)

    }
    open = () => {
        this.setState({ moreVisible: true })

    }
    render() {
        const { information = [] } = this.props
        return (
            <Tabs defaultActiveKey="1" >
                <TabPane tab="告警列表" key="1">
                    <div className={styles.body_box}>
                        {
                            information.length != 0 && information.map((item, index) => {

                                if (index <= 4) {
                                    return <div className={styles.box_list} onClick={() => { this.setState({ visible: true, information: item }) }}>
                                        <div className={styles.camera_img}>
                                            <img src={information.length == 0 ? null : IP + information[index].warningPhoto} alt="" />
                                        </div>
                                        <div className={styles.camera_information}>
                                            <div className={styles.left}>
                                                <div>{item.regionName}</div>
                                                <div>{item.warningTime}</div>
                                            </div>
                                            <div className={styles.camera_button}>
                                                <div>
                                                    {item.warningType}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                                if (index == 5) {
                                    return <div className={styles.more} onClick={this.open}>
                                        <div >查看更多<DoubleRightOutlined /></div>
                                    </div>
                                }
                            })
                        }
                        <div className={styles.detail}>
                            <Modal
                                title='告警信息详情'
                                key={Math.random()}
                                visible={this.state.visible}
                                centered
                                destroyOnClose
                                footer={null}
                                onCancel={() => { this.setState({ visible: false }) }}
                                onOk={() => { this.setState({ visible: false }) }}
                                getContainer={false}
                                width={1000}
                            >
                                <CircleList information={this.state.information} id={this.props.id} />
                            </Modal>
                        </div>
                        <Modal
                            title='告警信息查询'
                            visible={this.state.moreVisible}
                            centered
                            destroyOnClose
                            footer={null}
                            onCancel={this.close}
                            onOk={() => { this.setState({ moreVisible: false }) }}
                            getContainer={false}
                            width={1000}
                        >
                            {/* <DataTable  className={styles._table}/> */}
                            <Warning information={this.props.information} switch={this.switch} id={this.props.id} />

                        </Modal>
                    </div>
                </TabPane>
                <TabPane tab='摄像机信息' key='2'>
                    <IconTable information={this.props.alarmdetails} />
                </TabPane>
            </Tabs>
        )
    }
}
const mapStateToProps = (state) => ({
    Alarmdetails: state.Mapcamera.Alarmdetails
})
const mapDispatchToProps = (dispatch) => ({
    getVidiconWarning(id) {
        dispatch(actions.getVidiconWarning(id))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Index);
